<template>
	<view class="page">

		<view class="coverimg-wrapper">
			<u-swiper :list="activity.coverImg" imgMode="aspectFill" :height="422" :autoplay="false" :radius="0"
				circular></u-swiper>
		</view>

		<view class="activity-wrapper">
			<view class="activity-title">{{activity.activityName}}</view>
			<view class="activity-price">
				<block v-if="activity.price>0">￥</block>
				<text>{{activity.price>0?activity.price:"免费"}}</text>
				<view class="activity-viptag" v-if="activity.price>0">
					{{ activity.memberPrice>0 ? `会员价:￥${activity.memberPrice}` : `会员免费` }}
				</view>
			</view>
			<view class="activity-labels">
				<text v-for="(item, index) in activity.labels" :key="index">{{item}}</text>
			</view>
		</view>

		<view class="activity-wrapper info-wrapper">
			<view class="info-box">
				<view class="info-label">活动时间</view>
				<view class="info-value">{{ activity.timeStart }} - {{ activity.timeEnd }}
				</view>
			</view>
			<view class="info-box" v-if="activity.enrollLimit>0">
				<view class="info-label">报名截止时间</view>
				<view class="info-value">
					<text>{{ activity.enrollEnd }}</text>
					<text v-if="isCloseEnroll">（已截止报名）</text>
				</view>
			</view>
			<view class="info-box" v-if="activity.enrollLimit>0">
				<view class="info-label">报名人数</view>
				<view class="info-value">已报名{{ activity.enrollNum }}人，限制{{ activity.enrollLimit }}人
				</view>
			</view>

			<view class="info-box" :class="{ 'camp-wrapper': activity.addressType==2 }">
				<view class="info-label">活动地点</view>
				<view class="info-value" style="display: flex; align-items: center; justify-content: space-between;"
					v-if="activity.addressType==1" @click="handleToMap">
					<text>{{activity.address||'-'}}</text>
					<u-icon name="arrow-right" size="28rpx" color="rgba(0, 0, 0, 0.5)"></u-icon>
				</view>
				<view class="camp-box" v-else>
					<image class="camp-img" :src="camp.coverImg" mode="aspectFill"></image>
					<view class="camp-box_bd">
						<view class="camp-title">{{camp.campName}}</view>
						<view class="camp-address">
							<text>{{camp.address}}</text>
							<view class="camp-nav" @click="handleToMap">
								<text>导航</text>
								<u-icon name="arrow-right" size="28rpx" color="rgba(0, 0, 0, 0.5)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="activity-wrapper details-wrapper" v-if="activity.content.length>0">
			<u-parse :content="activity.content"></u-parse>
		</view>

		<view class="foorter-wrapper">
			<view class="footer-box">
				<view class="footer-icon">
					<image src="/static/img/shareIcon.png"></image>
					<span>分享</span>
					<button open-type="share"></button>
				</view>
				<view class="footer-icon" @click="toggleCollect">
					<image src="/static/img/collect_selected.png" v-if="activity.collect"></image>
					<image src="/static/img/collect_default.png" v-else></image>
					<span>{{ activity.collect ? "已收藏":"收藏" }}</span>
				</view>
				<view class="footer-btn" @click="handleContact()">联系客服</view>
				<view class="footer-btn disabled" v-if="isCloseEnroll">已截止报名</view>
				<view class="footer-btn primary" @click="handleSubmit()" v-else>立即报名</view>
			</view>
		</view>

		<!-- 联系客服 -->
		<u-popup :show="isShowPopup" @close="isShowPopup=false">
			<view class="contact-wrapper">
				<image class="contact-wrapper_bg" mode="aspectFill" src="/static/img/windowsBg.png">
				</image>
				<view class="contact-wrapper_hd">
					<text>联系客服</text>
					<view class="close-btn">
						<u-icon name="close" color="#1A1311" size="24"></u-icon>
						<view class="hotarea" @click="isShowPopup=false"></view>
					</view>
				</view>
				<view class="contact-wrapper_bd">
					<view class="contact-box" v-for="(item, index) in contactList" :key="index"
						@click="item.type==1?handleCopyWX(item.link):handleCall(item.link)">
						<text class="contact-label">{{item.type==1?"客服微信号":"客服手机号"}}:</text>
						<text class="contact-value">{{item.link}}</text>
						<view class="contact-btn">{{item.type==1?"复制微信号":"拨打电话"}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getActivity,
		collectActivity
	} from '@/api/activity.js';
	import {
		getCamp
	} from '@/api/camp.js';
	import {
		getContactList
	} from '@/api/public.js';
	import {
		dateFormat,
		urlDecode
	} from '@/utils/util';

	export default {
		components: {},
		data() {
			return {
				options: {},
				activity: null,
				camp: null,
				contactList: [],
				// 是否展示联系客服
				isShowPopup: false,
				// 是否报名截止
				isCloseEnroll: false,
			}
		},
		onLoad(options) {
			let that = this
			if (options.scene) {
				options = urlDecode(decodeURIComponent(options.scene))
			}
			console.log(options)
			that.options = options
		},
		onShow() {
			let that = this
			that.getActivity()
		},
		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			const that = this
			let {
				activityId,
				activityName,
				coverImg
			} = that.activity
			return {
				path: `/pages/activity/detail?activityId=${activityId}`,
				title: activityName,
				imageUrl: coverImg,
			}
		},
		/**
		 * 分享微信朋友圈
		 */
		onShareTimeline() {
			const that = this
			let {
				activityId,
				activityName,
			} = that.activity
			return {
				title: activityName,
				query: `activityId=${activityId}`,
			}
		},
		methods: {
			// 获取活动信息
			getActivity() {
				uni.showLoading()
				let that = this
				getActivity({
					activityId: that.options.activityId
				}).then(res => {
					let {
						timeStart,
						timeEnd,
						enrollEnd,
						coverImg,
						campId,
						addressType,
						label,
					} = res.data
					// 封面图片格式化
					let coverImgs = []
					coverImgs.push(coverImg)
					// 标签描述格式化
					let labels = label.split(",")
					// 报名截止判断
					if (new Date() > new Date(enrollEnd)) {
						that.isCloseEnroll = true
					}
					// 数据重置
					that.activity = {
						...res.data,
						"coverImg": coverImgs,
						"labels": labels,
						"timeStart": dateFormat('YYYY/mm/dd', new Date(timeStart)),
						"timeEnd": dateFormat('YYYY/mm/dd', new Date(timeEnd)),
						"enrollEnd": dateFormat('YYYY/mm/dd', new Date(enrollEnd))
					}
					if (addressType == 2) {
						that.getCamp(campId)
					}
				}).finally(res => {
					uni.hideLoading()
				})
			},

			// 收藏
			toggleCollect() {
				let that = this
				collectActivity(that.options.activityId).then(res => {
					that.activity.collect = !that.activity.collect
					if (that.activity.collect) {
						that.$util.showToast('已收藏')
					} else {
						that.$util.showToast('已取消')
					}
				})
			},

			// 获取营地信息
			getCamp(campId) {
				let that = this
				getCamp({
					campId
				}).then(res => {
					that.camp = res.data
				})
			},

			// 联系客服
			handleContact() {
				let that = this
				getContactList().then(res => {
					that.contactList = res.rows
					that.isShowPopup = true
				})
			},

			// 立即报名
			handleSubmit() {
				let that = this
				that.$util.navTo('pages/apply/index', {
					activityId: that.options.activityId,
					mode: 'activity'
				})
			},

			// 复制微信号
			handleCopyWX(str) {
				let that = this
				uni.setClipboardData({
					data: str.toString(),
					success: res => {
						that.$util.showSuccess('已复制')
						that.isShowPopup = false
					}
				})
			},

			// 拨打电话
			handleCall(str) {
				let that = this
				uni.makePhoneCall({
					phoneNumber: str,
					success: () => {
						that.isShowPopup = false
					}
				})
			},

			// 导航
			handleToMap() {
				let that = this
				let name = '',
					latitude = '',
					longitude = ''
				if (that.activity.addressType == 1) {
					let {
						address,
						lat,
						lng,
					} = that.activity
					name = address
					latitude = lat
					longitude = lng
				} else {
					let {
						address,
						lat,
						lng,
					} = that.camp
					name = address
					latitude = lat
					longitude = lng
				}
				uni.openLocation({
					name: name,
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: rgba(242, 238, 231, 1);
	}

	.activity-wrapper {
		background-color: rgba(247, 245, 240, 1);
		color: rgba(26, 19, 17, 1);
		padding: 32rpx;

		.activity-title {
			font-size: 48rpx;
			font-weight: bold;
		}

		.activity-price {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			margin-top: 24rpx;

			text {
				font-size: 40rpx;
			}

			.activity-viptag {
				font-size: 26rpx;
				font-weight: bold;
				line-height: 48rpx;
				color: #393939;
				padding: 0 16rpx;
				border-radius: 32rpx;
				background-image: linear-gradient(65deg, #D3B163, #F7E9B8);
				margin-left: 16rpx;
			}
		}

		.activity-labels {
			margin-top: 8rpx;

			text {
				display: inline-block;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.5);
				padding: 16rpx;
				background-color: rgba(237, 231, 217, 1);
				border-radius: 8rpx;
				margin-right: 16rpx;
				margin-top: 16rpx;
			}
		}

		&.info-wrapper {
			padding: 0;
			border-top: 1rpx solid rgba(26, 19, 17, .1);

			.info-box {
				display: flex;
				padding: 32rpx;
				position: relative;
				font-size: 28rpx;

				.info-label {
					color: rgba(0, 0, 0, 0.5);
					min-width: 180rpx;
					padding-right: 32rpx;

				}

				.info-value {
					flex: 1;
				}

				&+.info-box::after {
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 32rpx;
					right: 32rpx;
					border-top: 1rpx solid rgba(26, 19, 17, .1);
				}

				&.camp-wrapper {
					flex-direction: column;

					.camp-box {
						display: flex;
						align-items: center;
						margin-top: 32rpx;

						.camp-img {
							display: block;
							border-radius: 8rpx;
							width: 200rpx;
							height: 150rpx;
						}

						.camp-box_bd {
							flex: 1;
							margin-left: 32rpx;
							font-size: 28rpx;

							.camp-address {
								color: rgba(0, 0, 0, 0.5);
								margin-top: 16rpx;
								display: flex;
								align-items: flex-start;

								text {
									flex: 1;
								}

								.camp-nav {
									margin-left: 32rpx;
									flex-shrink: 0;
									display: flex;
									align-items: center;
								}
							}
						}
					}
				}
			}
		}

		&.details-wrapper {
			margin-top: 32rpx;
		}
	}

	.foorter-wrapper {
		&::before {
			content: '';
			display: block;
			height: 160rpx;
		}

		.footer-box {
			border-top: 1rpx solid rgba(26, 19, 17, .1);
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 160rpx;
			background-color: rgba(247, 245, 240, 1);
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 24rpx;

			.footer-icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				line-height: 40rpx;
				width: 96rpx;
				height: 96rpx;
				position: relative;

				image {
					display: block;
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 8rpx;
				}

				button {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					background-color: red;
					opacity: 0;
				}
			}

			.footer-btn {
				flex: 1;
				line-height: 96rpx;
				border: 1rpx solid rgba(26, 19, 17, 1);
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(26, 19, 17, 1);
				margin-left: 24rpx;
				border-radius: 48rpx;
				text-align: center;
				box-sizing: border-box;

				&.primary {
					background-color: rgba(26, 19, 17, 1);
					color: #fff;
				}

				&.disabled {
					background-color: rgba(26, 19, 17, .2);
					border-color: rgba(26, 19, 17, .2);
					;
					color: #fff;
				}

			}

		}
	}

	.contact-wrapper {
		position: relative;
		padding-bottom: 64rpx;

		.contact-wrapper_bg {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			// z-index: 1;
		}

		.contact-wrapper_hd {
			display: flex;
			align-items: center;
			padding: 48rpx 32rpx;
			z-index: 10;
			position: relative;

			text {
				flex: 1;
				font-size: 34rpx;
				font-weight: bold;
			}

			.close-btn {
				position: relative;

				.hotarea {
					opacity: 0;
					position: absolute;
					top: -24rpx;
					left: -24rpx;
					right: -24rpx;
					bottom: -24rpx;
				}
			}
		}

		.contact-wrapper_bd {
			padding: 0 32rpx;
			z-index: 10;
			position: relative;

			.contact-box {
				display: flex;
				align-items: center;
				background-color: rgba(247, 245, 240, 1);
				border: 1rpx solid rgba(26, 19, 17, 1);
				font-size: 28rpx;
				color: rgba(26, 19, 17, 1);
				padding: 48rpx 32rpx;
				border-radius: 16rpx;

				.contact-label {
					color: rgba(26, 19, 17, 0.5);
				}

				.contact-value {
					flex: 1;
				}

				.contact-btn {
					font-weight: bold;
				}

				&+.contact-box {
					margin-top: 32rpx;
				}
			}
		}
	}
</style>
